<template>
  <div class="wrapper">
    <v-head></v-head>
    <v-nav></v-nav>
    <div class="contentBox">
      <!-- 页面切换过度状态 -->
      <transition name="move" mode="out-in">
        <router-view>
        </router-view>
      </transition>
    </div>
  </div>
</template>
<script>
import vPageTitle from "./PageTitle";
import vHead from "./Header.vue";
import vNav from "./Nav.vue";
export default {
  name: "Home",
  components: {
    vHead,
    vNav,
    vPageTitle
  },
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/theme/theme";
.contentBox {
  position: absolute;
  top: 70px;
  left: 250px;
  width: calc(100% - 250px);
  height: calc(100% - 70px);
  min-width: 1116px; // 1366 - 250
  background-color: @contentBgc;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 55px 15px 10px;
}
@media screen and (max-width: 1366px) {
  .contentBox {
    left: 65px;
    width: calc(100% - 65px);
    min-width: 1301px; // 1366 - 65
  }
}
</style>
